<template>

  <div class="homeContainer"  v-lazy:background-image="bgc">
    <van-sticky class="header">
      <SearchBox></SearchBox>
      <!-- navBar-->
      <div class="navBar">
        <!-- @click="getCategoryList"-->
        <!-- 1005002   如果找不到匹配的, 就选中第一个, navId的值就会变为-1 -->
        <van-tabs
            line-width="50px"
            line-height="2px"
            v-model="navId"
            title-inactive-color="#323233"
            title-active-color="#dd1a21"
            @click="showList">
         <!-- 解决在分类路径下刷新tab总是选中推荐的bug -->
          <van-tab v-if="categoryList.length>0" title-class="navItem" name="-1" title="推荐"></van-tab>
          <van-tab
              v-for="cate in categoryList"
              :key="cate.extra.operationResource.categoryId"
              :name="cate.extra.operationResource.categoryId"
              :title="cate.extra.operationResource.categoryName">
          </van-tab>
        </van-tabs>
        <van-icon v-if="categoryList[0]" class="arrow_down" :class="{direction:arrow}" name="arrow-down" @click="openArrow"></van-icon>
        <van-overlay class-name="mask" :show="isShowMask" @click="isShowMask = false">
          <ul class="wrapper" @click.stop>
            <div class="allNav">全部频道</div>
            <li @click="showList('-1')" :class="{active: navId === '-1'}">推荐</li>
            <li @click="showList(nav.extra.operationResource.categoryId)"
                :class="{active:navId === nav.extra.operationResource.categoryId}" 
                v-for="(nav,index) in categoryList"
                :key="nav.extra.operationResource.categoryId">{{ nav.extra.operationResource.categoryName }}
            </li>
          </ul>
        </van-overlay>
      </div>
    </van-sticky>
    <!-- 点击跳到顶部 -->
    <van-sticky class="toTop" :offset-top="scrollTop-100" v-if="goTop">
      <div class="arrow" @click="toTop">
        <van-icon name="arrow-up" class="arrow-up"  />
      </div>
    </van-sticky>

    <Recommend v-show="!$route.params.categoryId"></Recommend>
    <router-view></router-view>
  </div>


</template>

<script>
import {mapState} from 'vuex';
import Recommend from "@/pages/Home/Recommend/Recommend";


export default {
  name: "Home",
  components: {Recommend},
  data() {
    return {
      bgc: 'https://yanxuan-static.nosdn.127.net/hxm/yanxuan-node-wap/style/img/skeleton/index-c93cde177f7c39a2f4c1.png',
      isShowMask: false,
      navId: this.$route.params.categoryId || '-1',// 顶部分类导航
      goTop: false,//用于判断是否显示回到顶部按钮
      arrow: false,// 同来控制箭头方向，fasle表示向下，true向上
    }
  },
  computed: {
    ...mapState({
      homeInfo: state => state.home.homeInfo,
    }),
    // 导航分类列表
    categoryList() {
      return this.homeInfo.categoryHotSellModule ? this.homeInfo.categoryHotSellModule.categoryList : []
    },
    // 屏幕高度
    scrollTop(){
      return  document.documentElement.clientHeight
    },

  },

  watch: {
    // 解决在某个分类列表下， 点击底部首页tab不选中推荐的bug
    $route () {
      const navId = this.$route.params.categoryId || '-1'
      this.navId = navId
    }
  },

  mounted() {
    this.getHomeInfo()
    //  监听屏幕滚动此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);

  },
  methods: {
    // 获取展示数据
    async getHomeInfo() {
      await this.$store.dispatch('getHomeInfo')
      this.bgc = ''
    },
    
    // 监听屏幕的回调函数
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      scrollTop > this.scrollTop ? (this.goTop = true) : (this.goTop = false);
    },
    // 实现滚动
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 设计总滑动时长为0.3S, 计算出一次滑动的距离
      const distance = top*10/300
      // 实现滚动效果
      this.timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= distance;
        if (top <= 0) {
          clearInterval(this.timeTop);
          this.timeTop=null
        }
      }, 10);
    },
    // 点击箭头 打开分类
    openArrow(){
      this.isShowMask = !this.isShowMask
      this.arrow = !this.arrow
    },

    showList(navId) {
      console.log('showList', navId)
      if (navId==='-1') {
        this.$router.push(`/home`)
        this.$bus.$emit('setActive', 0)
      } else {
        this.$router.push(`/home/${navId}`)
        this.$bus.$emit('setActive', -1)
      }
      this.navId = navId
      this.isShowMask = false
    },
  },

}
</script>

<style lang="less" scoped>


.homeContainer {
  height: 100%;
  background-size: cover;


  .header {

    //导航列表
    .navBar {
      padding-right: 20px;
      position: relative;
      display: flex;
      align-items: center;
      .van-tabs {
        margin-right: 20px;
      }
      ::v-deep .van-tabs__wrap--scrollable {
        height: 30px;
      }

      .navItem {
        font-size: 14px;
        height: 30px;
      }


      .arrow_down {
        padding-right: 10px;
        position: absolute;
        top: 0;
        //transform: translateY(-50%);
        right: 0;
        //height: 29px;
        //width: 40px;
        border-radius:50%;
        //box-shadow: -5px -5px 5px 2px rgba(255, 255, 255, 0.5);
        text-align: center;
        line-height: 29px;
        background: #ffffff;
        z-index: 999;
        //font-size:28px;
        transition:all 1s;
        &.direction{
          transform:rotate(180deg);
        }
      }
    }

    //遮罩层
    .mask {
      margin-top: 43px;
      height: 100%;

      .wrapper {
        display: flex;
        height: 200px;
        width: 375px;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;

        .allNav {
          width: 375px;
          height: 30px;
          font-size: 14px;
          color: #333333;
          line-height: 30px;
          margin: 0 0 20px 15px;
        }

        li {
          width: 75px;
          height: 28px;
          color: #333333;
          text-align: center;
          line-height: 28px;
          margin: 0 0 20px 15px;
          box-sizing: border-box;
          border: 1px solid #ccc;
          background: #fafafa;
          border-radius: 2px;
          font-size: 12px;

          &.active {
            border: 1px solid #dd1a21;
            color: #dd1a21;
          }
        }

      }
    }
  }

  //底部点击返回的顶部
  .toTop{
    overflow: hidden;
    width: 41px;
    .arrow{
      width: 41px;
      height: 41px;
      border-radius:50%;
      background-color:#FEFEFE;
      opacity:0.7;
      text-align: center;
      position: absolute;
      right: 10px;
      .arrow-up{
        line-height:41px;
      }
    }
  }
}


</style>
